<template>
    <div class="w-[100%] h-[100%] custom-loading-container" :element-loading-spinner="loadSvg" v-loading="show"
        element-loading-text="加载中..." element-loading-svg-view-box="-10, -10, 50, 50"
        element-loading-background="rgba(122, 122, 122, 0.8)">
        <slot></slot>
    </div>
</template>
<script lang="ts" setup>
import { useThemeStore } from '@/stores';
import { computed } from 'vue';
const themeStore = useThemeStore();
defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const loadSvg = computed(() => {
    return `
      <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 0px; fill: ${themeStore.primaryColor}"/>
    `;
});
</script>
<style scoped lang="less">
.custom-loading-container {
    &:deep(.el-loading-spinner) {
        .el-loading-text {
            color: var(--theme-color);
        }
    }
}
</style>